<template>
  <div>
    <div class="top">
      <div class="menu">
        <a><i class="el-icon-view el-icon--right"></i>设置</a>
        <a><i class="el-icon-view el-icon--right"></i>退出</a>
      </div>
      <div class="list">
        <div v-for="(item, index) in 4" :key="index">
          <div class="label">待办任务/在办事项</div>
          <div class="number">89</div>
        </div>
      </div>
    </div>
    <div class="content">
      <el-tabs class="mb15" value="first" type="card">
        <el-tab-pane label="用户管理" name="first">
          <el-table
            :data="tableData"
            height="250">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
      <el-tabs class="mb15" value="first" type="card">
        <el-tab-pane label="综合查询" name="first">
          <el-row class="search-row">
            <el-col class="label" :span="2">机构名称</el-col>
            <el-col :span="22">
              <el-input style="width:300px;" placeholder="审批人"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary">查询</el-button>
            </el-col>
          </el-row>
          <el-row class="search-row">
            <el-col class="label" :span="2">区县：</el-col>
            <el-col :span="22">
              <el-tag v-for="tag in 20" :key="tag" :hit="false" :class="{active: tag == 1}" type="info">长宁区</el-tag>
            </el-col>
          </el-row>
          <el-row class="search-row">
            <el-col class="label" :span="2">专业：</el-col>
            <el-col :span="22">
              <el-tag v-for="tag in 20" :key="tag" :hit="false" :class="{active: tag == 1}" type="info">消毒卫生</el-tag>
            </el-col>
          </el-row>
          <div class="sub-search">
            <el-row class="search-row">
              <el-col class="label" :span="2">经营性质：</el-col>
              <el-col :span="22">
                <el-tag v-for="tag in 20" :key="tag" :hit="false" :class="{active: tag == 1}" type="info">长宁区</el-tag>
              </el-col>
            </el-row>
            <el-row class="search-row">
              <el-col class="label" :span="2">经营性质：</el-col>
              <el-col :span="22">
                <el-tag v-for="tag in 20" :key="tag" :hit="false" :class="{active: tag == 1}" type="info">消毒卫生</el-tag>
              </el-col>
            </el-row>
          </div>
          <el-row class="search-row" style="margin-bottom: 0;padding-top:10px">
            <el-col class="label" :span="2">是否注销：</el-col>
            <el-col :span="22">
              <el-radio-group v-model="radio" style="margin-top: 10px;">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
                <el-radio :label="9">备选项</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-tabs class="mb15" value="first" type="card">
        <el-tab-pane label="用户管理" name="first">
          <el-table
            :data="tableData"
            height="250">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
       <el-tabs class="mb15" value="first" type="card">
        <el-tab-pane label="用户管理" name="first">
          <el-table
            :data="tableData"
            height="250">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
}
</script>
<style lang="scss" scoped>
  .top{
    height: 420px;
    background: url('../assets/top-bg.jpg') no-repeat center center;
    background-size: 100% 100%;
    .menu{
      text-align: right;
      color: #9f9ac9;
      font-size: 14px;
      padding: 15px;
      a{
        i{
          padding-right: 5px;
        }
        cursor: pointer;
        &:hover{
          color: #fff;
        }
      }
    }
    .list{
      display: flex;
      padding: 0 150px;
      color: #fff;
      > div{
        flex: 1;
        &:last-child{
          .number{
            &::after{
              display: none;
            }
          }
        }
        .label{
          font-size: 14px;
          margin-bottom: 12px;
        }
        .number{
          text-align: center;
          font-size: 36px;
          height: 66px;
          line-height: 66px;
          position: relative;
          &::after{
            content: "";
            display: block;
            position: absolute;
            width: 1px;
            height: 100%;
            right: 0;
            top: 0;
           /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cccfe0+0,cccfe0+100&0+0,1+40,1+60,0+100 */
            background: -moz-linear-gradient(top,  rgba(204,207,224,0) 0%, rgba(204,207,224,1) 40%, rgba(204,207,224,1) 60%, rgba(204,207,224,0) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  rgba(204,207,224,0) 0%,rgba(204,207,224,1) 40%,rgba(204,207,224,1) 60%,rgba(204,207,224,0) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  rgba(204,207,224,0) 0%,rgba(204,207,224,1) 40%,rgba(204,207,224,1) 60%,rgba(204,207,224,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cccfe0', endColorstr='#00cccfe0',GradientType=0 ); /* IE6-9 */

          }
        }
      }
    }
  }
  .content{
    margin: -200px 15px 0 15px;
  }
  .sub-search{
    background: #eee;
    padding: 20px;
  }
  .search-row{
    margin-bottom: 10px;
    .label{
      height: 38px;
      line-height: 38px;
      color: #999;
      font-size: 14px;
    }
    .el-tag{
      cursor: pointer;
      border:none;
      background-color: transparent;
      border-radius: 0;
      margin: 5px 10px;
      height: 28px;
      line-height: 28px;
      &.active{
        border: 1px solid #12347b;
        color: #12347b;
      }
    }
  }
  
</style>